<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = "16px Arial";

        function drawArrow(x1, y1, x2, y2, arrowSize = 5) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            
            const angle = Math.atan2(y2 - y1, x2 - x1);
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - arrowSize * Math.cos(angle - Math.PI / 6), y2 - arrowSize * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - arrowSize * Math.cos(angle + Math.PI / 6), y2 - arrowSize * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Side View (Left) ---
        
        // Top Magnet (S)
        ctx.beginPath();
        // Bottom face
        ctx.moveTo(140, 190); // bottom-left
        ctx.lineTo(280, 190); // bottom-right
        ctx.lineTo(300, 160); // back-right
        ctx.lineTo(160, 160); // back-left
        ctx.closePath();
        // Front face
        ctx.moveTo(140, 190);
        ctx.lineTo(140, 150);
        ctx.lineTo(280, 150);
        ctx.lineTo(280, 190);
        // Top face
        ctx.moveTo(140, 150);
        ctx.lineTo(160, 120);
        ctx.lineTo(300, 120);
        ctx.lineTo(280, 150);
        // Jagged edge
        ctx.moveTo(300, 160);
        ctx.lineTo(310, 165);
        ctx.lineTo(305, 175);
        ctx.lineTo(315, 170);
        ctx.stroke();
        ctx.font = "bold 18px Arial";
        ctx.fillText("S", 215, 180);
        ctx.font = "16px Arial";

        // Dimension for Top Magnet
        ctx.beginPath();
        ctx.setLineDash([3, 3]);
        ctx.moveTo(180, 120);
        ctx.lineTo(180, 90);
        ctx.moveTo(265, 120);
        ctx.lineTo(265, 90);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.beginPath();
        ctx.moveTo(180, 90);
        ctx.lineTo(265, 90);
        ctx.stroke();
        ctx.fillText("8.5 cm", 200, 85);

        // Bottom Magnet (N)
        ctx.beginPath();
        // Top Face
        ctx.moveTo(140, 250); // front-left
        ctx.lineTo(280, 250); // front-right
        ctx.lineTo(300, 220); // back-right
        ctx.lineTo(160, 220); // back-left
        ctx.closePath();
        // Front Face
        ctx.moveTo(140, 250);
        ctx.lineTo(140, 290);
        ctx.lineTo(280, 290);
        ctx.lineTo(280, 250);
        // Jagged Edge
        ctx.moveTo(140, 290);
        ctx.lineTo(130, 285);
        ctx.lineTo(135, 300);
        ctx.lineTo(125, 305);
        ctx.stroke();
        ctx.font = "bold 18px Arial";
        ctx.fillText("N", 215, 240);
        ctx.font = "16px Arial";

        // Copper Wire and Labels
        ctx.save();
        ctx.lineWidth = 2;
        drawArrow(50, 220, 380, 220, 8);
        ctx.restore();
        
        ctx.fillText("copper", 130, 50);
        ctx.fillText("wire", 140, 70);
        ctx.beginPath();
        ctx.moveTo(160, 75);
        ctx.lineTo(200, 215);
        ctx.stroke();

        ctx.textAlign = 'left';
        ctx.fillText("direction", 30, 205);
        ctx.fillText("of current", 30, 225);
        ctx.save();
        ctx.lineWidth = 2;
        drawArrow(20, 220, 80, 220, 8);
        ctx.restore();
        
        ctx.textAlign = 'center';
        ctx.fillText("side view", 225, 350);


        // --- Top View (Right) ---
        const topViewX = 530;
        const magnetWidth = 120;
        
        // Top Magnet (S)
        ctx.strokeRect(topViewX, 120, magnetWidth, 40);
        ctx.font = "bold 18px Arial";
        ctx.fillText("S", topViewX + magnetWidth / 2, 148);
        ctx.font = "16px Arial";

        // Dimension for Top Magnet
        ctx.beginPath();
        ctx.setLineDash([3, 3]);
        ctx.moveTo(topViewX, 120);
        ctx.lineTo(topViewX, 90);
        ctx.moveTo(topViewX + magnetWidth, 120);
        ctx.lineTo(topViewX + magnetWidth, 90);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.beginPath();
        ctx.moveTo(topViewX, 90);
        ctx.lineTo(topViewX + magnetWidth, 90);
        ctx.stroke();
        ctx.fillText("8.5 cm", topViewX + magnetWidth / 2, 85);

        // Bottom Magnet (N)
        ctx.strokeRect(topViewX, 280, magnetWidth, 40);
        ctx.font = "bold 18px Arial";
        ctx.fillText("N", topViewX + magnetWidth / 2, 308);
        ctx.font = "16px Arial";

        // Magnetic Field Lines
        const fieldYStart = 280;
        const fieldYEnd = 160;
        ctx.beginPath();
        for (let i = 1; i <= 3; i++) {
            let x = topViewX + (magnetWidth * i / 4);
            drawArrow(x, fieldYStart, x, fieldYEnd, 8);
        }
        ctx.stroke();
        
        // Wire in Top View
        const wireStartX = 470, wireStartY = 260;
        const wireEndX = 710, wireEndY = 180;
        ctx.save();
        ctx.lineWidth = 2;
        drawArrow(wireStartX, wireStartY, wireEndX, wireEndY, 8);
        ctx.restore();

        // Angle theta
        const intersectX = topViewX + magnetWidth / 2; // 530 + 60 = 590
        const wireSlope = (wireEndY - wireStartY) / (wireEndX - wireStartX); // (180-260)/(710-470) = -80/240 = -1/3
        const wireAngle = Math.atan(wireSlope);
        const intersectY = wireStartY + wireSlope * (intersectX - wireStartX);
        
        ctx.beginPath();
        ctx.arc(intersectX, intersectY, 25, wireAngle, -Math.PI / 2, true); // true for counter-clockwise
        ctx.stroke();
        
        ctx.font = "italic 16px Arial";
        const angleLabelRadius = 35;
        const angleMid = (wireAngle - Math.PI/2) / 2;
        ctx.fillText("θ", intersectX + angleLabelRadius * Math.cos(angleMid-0.2), intersectY + angleLabelRadius * Math.sin(angleMid-0.2));
        ctx.font = "16px Arial";

        ctx.fillText("top view", topViewX + magnetWidth/2, 350);

        // --- Figure Label ---
        ctx.fillText("Fig. 9.1", 400, 420);

    </script>
</body>
</html>